<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "@/plugins/myAxios";
import {useRouter} from "vue-router";
import {Message} from "@arco-design/web-vue";


//接收BasicLayout页面传的参数
const route = useRoute();

const info = reactive({
  identity: route.query.identity,
  typeId: route.query.typeId
})

// let identity = reactive('')
// let typeId = reactive('')
const adminInfo = ref({
  id:'',
  name:'',
  phone:'',
  password:''
});

onMounted(async ()=>{
  const res = await myAxios.get('/admin/current')
  adminInfo.value = res.data.data
})
//如果不是管理员，才能从本地获取
// if (!adminInfo.value){
//    identity = localStorage.getItem('identity')
//    typeId = localStorage.getItem('typeId')
// }

const visible = ref(false);
const roleVisible = ref(false);
const router = useRouter();
//点击对话框的"取消键"
const handleCancel = () => {
  visible.value = false;
}

//切换角色
const changeRole = async () => {
  roleVisible.value = true
}
const changeRoleOk = async () =>{
  const res = await myAxios.get('/admin/logout')
  if (res.data.code === '200'){
    await router.push('/')
    Message.success('登陆成功')
  }else{
    Message.error('密码或电话错误')
  }
}
</script>

<template>
  <div style="background-color: rgba(225,221,221,0.92)">
    <a-layout style="height: 100vh">
      <a-layout-header class="sticky-header" style="height: 10vh;background-color: white">
        <div style="height: 100%;display: flex; align-items: center">
          <icon-robot-add style="font-size: 35px;height: 100%"/>
          <span style="margin-left: 8px;font-size: 24px;font-style:normal">智选优居</span>
          <a-avatar trigger-type="mask" style="margin-left: auto;margin-right: 20px" @click="changeRole" :style="{ backgroundColor: '#14C9C9' }">
            <IconUser />
            <template #trigger-icon>
              <IconEdit />
            </template>
          </a-avatar>
          <a-modal v-model:visible="roleVisible" title="退出登录" @cancel="handleCancel" @ok="changeRoleOk"></a-modal>
        </div>
      </a-layout-header>
      <a-layout style="margin-top: 15px">
        <a-layout-sider class="sticky-side" style="margin-left: 20px">
          <div class="menu-demo">
            <a-menu :style="{ width: '200px', height: '100%' }" breakpoint="xl" style="border-radius: 10px">
              <a-menu-item key="0_1" v-if="adminInfo.password === null">
                <icon-archive/>
                <router-link :to="{
      path: '/menu/info',
      query: {
        identity: info.identity,
        typeId: info.typeId
      }
    }">住房信息
                </router-link>
              </a-menu-item>
<!--              <a-menu-item key="0_1">-->
<!--                <icon-archive/>-->
<!--                <router-link to="/menu/info">住房信息</router-link>-->
<!--              </a-menu-item>-->
              <a-menu-item key="0_2">
                <icon-archive/>
                <router-link to="/menu/order">预定餐饮</router-link>
              </a-menu-item>
              <a-menu-item key="0_3">
                <icon-export/>
                <router-link to="/menu/consume">消费记录</router-link>
              </a-menu-item>
<!--              <a-menu-item key="0_4">-->
<!--                <icon-relation/>-->
<!--                <router-link to="/menu/info">关于我们</router-link>-->
<!--              </a-menu-item>-->
              <a-menu-item key="0_6" v-if="adminInfo.password">
                <icon-archive/>
                <router-link to="/menu/room">房间管理</router-link>
              </a-menu-item>
              <a-menu-item key="0_7" v-if="adminInfo.password">
                <icon-archive/>
                <router-link to="/menu/dish">菜品管理</router-link>
              </a-menu-item>
              <a-menu-item key="0_8" v-if="adminInfo.password">
                <icon-archive/>
                <router-link to="/menu/user">顾客管理</router-link>
              </a-menu-item>
              <a-menu-item key="0_9" v-if="adminInfo.password">
                <icon-archive/>
                <router-link to="/menu/account">统计信息</router-link>
              </a-menu-item>
            </a-menu>

          </div>
        </a-layout-sider>
        <a-layout-content class="scrollable-content" style="background-color: rgba(225,221,221,0.92)">
          <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<style scoped>
/* 固定 Header */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 固定 Side */
.sticky-side {
  position: sticky;
  top: 80px; /* Header 高度 + 间距 */
  height: calc(100vh - 80px); /* 视口高度 - Header 高度 */
  overflow-y: auto; /* 允许菜单滚动 */
}

/* 内容区滚动 */
.scrollable-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
</style>